<blockquote class="layui-elem-quote layui-quote-nm">
    <form class="layui-form layui-form-pane" id="searchForm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="keyword" placeholder="请输入昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">注册时间</label>
                <div class="layui-input-inline">
                    <input id="start_date" type="text" name="start_date" placeholder="开始时间" class="layui-input" readonly>
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input id="end_date" type="text" name="end_date" placeholder="结束时间" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-sm" id="searchBtn">查询</button>
                </div>
            </div>
        </div>
    </form>
</blockquote>

<table class="layui-hide" id="mytable" lay-filter="mytable"></table>

<script type="text/javascript">
    $(function(){
        //日期
        ybLaydate.render({
            elem: '#start_date'
        });
        ybLaydate.render({
            elem: '#end_date'
        });

        $("#searchBtn").click(function(){
            ybTable.reload('mytable',{
                page: {curr: 1}
                ,where: searchParamObj('searchForm')
            });
        });

        ybTable.render({
            elem: '#mytable'
            ,url: "{:url('getDataList')}"
            ,where: searchParamObj('searchForm')
            //,toolbar: '#toolbar'
            //,defaultToolbar: ['filter']
            ,title: '数据表'
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}
                {field:'id', width:80, title: 'ID'}
                ,{field:'header_img', title: '头像', templet: function(d){
                    return "<div class='layer-photos'><img width='27px' height='27px' layer-pid='' layer-src='"+ d.header_img+"' src='"+ d.header_img+"'></div>";
                }}
                ,{field:'nickname', title: '昵称'}
                ,{field:'gender', title: '性别', templet: function(d){
                    return d.gender == 1 ? '男' : (d.gender == 2 ? '女' : '未知')
                }}
                ,{field:'province', title: '省份'}
                ,{field:'city', title: '城市'}
                ,{field:'create_time', title: '注册时间'}
            ]]
            ,page: true
            ,response: {
                statusCode: 1 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.dataList //解析数据列表
                };
            }
            ,done: function(res, curr, count){
                ybLayer.photos({
                    photos: '.layer-photos'
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                })
            }
        });
    })
</script>